<template>
    <div>
        <blur :blur-amount=40 url="">
            <p class="center"><img :src="url" @error="defaultImg">
                <br/>
                <span style="color: #000">{{user.real_name}}</span>
            </p>
        </blur>
        <card :header="{title: '我的钱包'}">
            <div slot="content" class="wallet wallet_style">
                <div class="item-style">
                    <span>{{user.amount / 100.0 | money}}</span>
                    <br/>
                    余额
                </div>
                <div class="item-style">
                    <span>{{user.locked_amount / 100.0 | money }}</span>
                    <br/>
                    担保金
                </div>
                <div class="item-style">
                    <span>{{user.security / 100.0 | money}}</span>
                    <br/>
                    待收益
                </div>

            </div>
        </card>
        <group title="即时聊天">
            <cell title="聊天" @click.native="toGroup" is-link></cell>
        </group>
        <group title="基本信息">
            <cell title="我的角色">{{user.role | roles}}</cell>
            <cell title="提现" @click.native="encash" is-link></cell>
            <cell title="订单账单" @click.native="payments" is-link></cell>
            <cell @click.native="notify" is-link>
                <span slot="title">通知
                </span>
                <badge v-show="n_count > 0" :text="n_count"></badge>
            </cell>
        </group>
        <group title="订单信息">
            <cell title="进行中的订单" @click.native="pending_order" is-link></cell>
            <cell title="待结算的订单" @click.native="pay_order" is-link></cell>
            <cell title="安装完成的订单" @click.native="completed_order" is-link></cell>
        </group>
        <group title="设置">
            <cell title="设置提现账户" @click.native="depoist" is-link></cell>
            <cell title="通用设置" @click.native="common" is-link></cell>
        </group>
    </div>
</template>
<script>
    import {Cell, Group, Card, numberComma, Blur, Badge} from 'vux'
                        export default {
                            components: {
                                Cell,
                                    Group,
                                    Card,
                                    Blur,
                                    Badge
                            },
                            data() {
                                return {
                                    user: {headimg: {}},
                                    n_count: 0,
                                    url: null
                                }
                            },
                            created() {
                                this.$store.commit("storeState", {
                                    dash: true
                                })

                                this.fetch_user()
                            },
                            filters: {
                                money(val) {
                                    return numberComma(val, 3)
                                },
                                    roles(val) {
                                        let role = ""
                                        switch(val) {
                                            case 1:
                                                role = "品牌商"
                                                break;
                                            case 0:
                                                role= "普通用户"
                                                break;
                                            case 2:
                                                role = "服务商"
                                                break;
                                            case 3:
                                                role = "经销商"
                                                break;
                                        }
                                        return role;
                                    }
                            },
                            methods: {
                                fetch_user(){
                                    this.$http.get("users/owner_info.json").then(res => {
                                        this.user = res.data.user;
                                        this.url = res.data.user.headimg.url + "?imageView2/1/w/200/h/200"
                                        this.n_count = res.data.notify_count
                                    })
                                },
                                    notify(){
                                        this.$router.push({path: "/notify"})  
                                    },
                                    encash() {
                                        this.$router.push({path: "/cash"})
                                    },
                                    payments(){
                                        this.$router.push({path: "/payments"})
                                    },
                                    pending_order(){
                                        this.$router.push({path: "/main", query: {type: "pending"}})
                                    },
                                    pay_order(){
                                        this.$router.push({path: "/main", query: {type: "pay"}})
                                    },
                                    completed_order(){
                                        this.$router.push({path: "/main", query: {type: "completed"}})
                                    },
                                    common(){
                                        this.$router.push({path: "common_set"})
                                    },
                                    depoist(){
                                        this.$router.push({path: "depoist"})
                                    },
                                    defaultImg(row,col){
                                        row.target.src = "https://images.chuanggj.com/chuang.png"
                                    },
                                    toGroup() {
                                        this.$router.push({path: "group-chats"})
                                    }

                            }
                        }
                    </script>
                    <style>
                        .wallet {
                            display: flex;
                        }
                        .wallet_style {
                            padding: 10px 0;
                        }
                        .item-style {
                            border-right: 1px solid #c7c7c7;        
                        }
                        .wallet > div {
                            flex: 1;
                            text-align: center;
                            font-size: 14px;
                        }
                        .wallet span {
                            color: #f74c31;
                        }
                        .center {
                            text-align: center;
                            padding-top: 20px;
                            color: #fff;
                            font-size: 18px;
                        }
                        .center img {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            border: 4px solid #ececec;
                        }
                    </style>
